<template>
    <u-popup
        v-model="showPay"
        mode="bottom"
        safe-area-inset-bottom
        :mask-close-able="false"
        border-radius="14"
        closeable
        @close="handleClose"
    >
        <view class="h-[900rpx]">
            <page-status :status="popupStatus" :fixed="false">
                <template #error>
                    <u-empty text="订单信息错误，无法查询到订单信息" mode="order"></u-empty>
                </template>
                <template #default>
                    <view class="payment h-full w-full flex flex-col">
                        <view class="header py-[50rpx] flex flex-col items-center">
                            <price
                                :content="props.order_amount"
                                mainSize="44rpx"
                                minorSize="40rpx"
                                fontWeight="500"
                                color="#333"
                            ></price>

                            <template v-if="payData.cancelTime">
                                <view
                                    class="count-down flex items-center rounded-[30px] text-xs"
                                    v-if="timeStamp >= 0"
                                >
                                    <text>支付剩余时间：</text>
                                    <u-count-down
                                        :timestamp="timeStamp"
                                        format="HH:mm:ss"
                                        :font-size="22"
                                        :separator-size="26"
                                        @end="payData.cancelTime = 0"
                                    />
                                </view>
                            </template>
                        </view>
                        <view class="main flex-1 mx-[20rpx]">
                            <view>
                                <view class="payway-lists">
                                    <u-radio-group v-model="payWay" class="w-full">
                                        <view
                                            class="p-[20rpx] flex items-center w-full payway-item"
                                            v-for="(item, index) in payData.payWayList"
                                            :key="index"
                                            @click="selectPayWay(item.payWay)"
                                        >
                                            <u-image
                                                class="flex-none"
                                                :src="item.payImage"
                                                width="48"
                                                height="48"
                                            ></u-image>
                                            <view class="mx-[16rpx] flex-1">
                                                <view class="payway-item--name flex-1">
                                                    {{ item.payName }}
                                                </view>
                                                <view
                                                    class="text-muted text-xs"
                                                    v-if="item.payWay === 2"
                                                >
                                                    可用余额：{{ payData.money }}
                                                </view>
                                            </view>

                                            <u-radio
                                                class="mr-[-20rpx]"
                                                :name="item.payWay"
                                                active-color="#F36161"
                                            >
                                            </u-radio>
                                        </view>
                                    </u-radio-group>
                                </view>
                            </view>
                        </view>

                        <view class="submit-btn p-[20rpx]">
                            <button
                                @click="handlePay"
                                class="bg-primary text-lg text-white leading-[80rpx] h-[80rpx] rounded-full"
                                :loading="isLock"
                            >
                                立即支付
                            </button>
                        </view>
                    </view>
                </template>
            </page-status>
        </view>
    </u-popup>

    <u-popup
        class="pay-popup"
        v-model="showCheckPay"
        round
        mode="center"
        borderRadius="10"
        :maskCloseAble="false"
        @close="handleClose"
    >
        <view class="content bg-white w-[560rpx] p-[40rpx]">
            <view class="text-2xl font-medium text-center"> 支付确认 </view>
            <view class="pt-[30rpx] pb-[40rpx]">
                <view> 请在微信内完成支付，如果您已支付成功，请点击`已完成支付`按钮 </view>
            </view>
            <view class="flex">
                <view class="flex-1 mr-[20rpx]">
                    <button
                        class="Btn bg-white text-xs text-black leading-[60rpx] h-[60rpx] rounded-full"
                        @click="queryPayResult(false)"
                    >
                        重新支付
                    </button>
                </view>
                <view class="flex-1">
                    <button
                        class="bg-primary text-xs ml-[20rpx] text-white leading-[60rpx] h-[60rpx] rounded-full"
                        @click="queryPayResult()"
                    >
                        已完成支付
                    </button>
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script lang="ts" setup>
import { pay, PayWayEnum } from '@/utils/pay/index'
import { computed, ref, watch, watchEffect } from 'vue'
import { useLockFn } from '@/hooks/useLockFn'
import { series } from '@/utils/util'
import { ClientEnum, PageStatusEnum, PayStatusEnum } from '@/enums/appEnums'
import { useUserStore } from '@/stores/user'
import { client } from '@/utils/client'
import { getClient } from '@/utils/client'
import {
    apiPayPayWay,
    apiPayPrepay,
    apiQueryOrder,
    apiH5PayPrepay,
    apiQueryRecharge
} from '@/api/app'
import price from '@/components/price/price-v2.vue'
import { apiOrderClose } from '@/api/order'

/*
页面参数 orderId：订单id，from：订单来源
*/

const props = defineProps({
    show: {
        type: Boolean,
        required: true
    },
    showCheck: {
        type: Boolean
    },
    // 订单id
    orderId: {
        type: Number,
        required: true
    },
    order_amount: {
        type: String,
        required: true
    },
    //订单来源
    from: {
        default: 'order',
        type: String,
        required: true
    },
    //h5微信支付回跳路径，一般为拉起支付的页面路径
    redirect: {
        type: String
    }
})

const emit = defineEmits(['update:showCheck', 'update:show', 'close', 'success', 'fail'])

const payWay = ref()
const popupStatus = ref(PageStatusEnum.LOADING)
const payData = ref<any>({
    payWayList: [],
    cancelTime: null,
    money: 0
})

const showCheckPay = computed({
    get() {
        return props.showCheck
    },
    set(value) {
        emit('update:showCheck', value)
    }
})

const showPay = computed({
    get() {
        return props.show
    },
    set(value) {
        emit('update:show', value)
    }
})

const handleClose = () => {
    showPay.value = false
    emit('close')
}

const getPayData = async () => {
    popupStatus.value = PageStatusEnum.LOADING
    try {
        payData.value = await apiPayPayWay({
            scene: getClient(),
            orderId: props.orderId,
            type: props.from
        })
        popupStatus.value = PageStatusEnum.NORMAL
        const checkPay =
            payData.value.payWayList.find((item: any) => item.isDefault) ||
            payData.value.payWayList[0]
        payWay.value = checkPay?.payWay
    } catch (error) {
        uni.$u.toast(error)
        popupStatus.value = PageStatusEnum.ERROR
    }
}

const { bindMnp } = useUserStore().userInfo as { bindMnp: boolean }
const selectPayWay = (pay: number) => {
    payWay.value = pay
    console.log(payWay.value)
}
const payment = (() => {
    // 查询是否绑定微信
    const checkIsBindWx = async () => {
        if (
            [ClientEnum.OA_WEIXIN, ClientEnum.MP_WEIXIN].includes(client) &&
            !bindMnp &&
            payWay.value == PayWayEnum.WECHAT
        ) {
            showPay.value = false
            const res: any = await uni.showModal({
                title: '温馨提示',
                content: '当前账号未绑定微信，无法完成支付',
                confirmText: '去绑定'
            })
            if (res.confirm) {
                uni.navigateTo({
                    url: '/pages/user_set/user_set'
                })
            }
            return Promise.reject()
        }
    }

    // 调用预支付
    const prepayTask = async () => {
        uni.showLoading({
            title: '正在支付中'
        })
        let payChannel = ''
        switch (client) {
            case 1:
                payChannel = 'mp_channel'
                break
            case 2:
                payChannel = 'oa_channel'
                break
            case 3:
                payChannel = 'h5_channel'
                break
        }
        try {
            const params = {
                orderId: props.orderId,
                payChannel,
                scene: props.from,
                payWay: payWay.value // 1-微信 2-余额
            }
            // 微信or公众号支付
            if (payChannel === 'mp_channel' || payChannel === 'oa_channel') {
                const res = await apiPayPrepay({ ...params })
                return { pay_way: payWay.value, config: res }
            } else if (payChannel === 'h5_channel') {
                const res = await apiH5PayPrepay({ ...params })
                const redirect = `&redirect_url=${encodeURIComponent(
                    window.location.href + '&checkPay=' + true + '&order_id=' + props.orderId
                )}`
				
				if (payWay.value == 3) {
					//console.log(res, "vvv")
					// 将接口返回的form表单显示到页面
					document.querySelector('body').innerHTML = res;
					//调用submit方法
					document.forms[0].submit()
					return ;
				} else {
					return { pay_way: payWay.value, config: res.url + redirect }
				}
            }
        } catch (err) {
            return uni.$u.toast(err)
        }
    }

    //拉起支付
    const payTask = async (data: any) => {
        try {
            const res = await pay.payment(data.pay_way, data.config)
            return res
        } catch (error) {
            return Promise.reject(error)
        }
    }

    return series(checkIsBindWx, prepayTask, payTask)
})()

const { isLock, lockFn: handlePay } = useLockFn(async () => {
    try {
        const res: PayStatusEnum = await payment()
        handlePayResult(res)
        uni.hideLoading()
    } catch (error) {
        uni.hideLoading()
        console.log(error)
    }
})

const handlePayResult = (status: PayStatusEnum) => {
    queryPayStatus()
    switch (status) {
        case PayStatusEnum.SUCCESS:
            emit('success')
            break
        case PayStatusEnum.PENDING:
            showCheckPay.value = true
            break
        case PayStatusEnum.FAIL:
            emit('fail')
            break
    }
}

const queryPayResult = async (confirm = true) => {
    const res = await queryPayStatus()
    if (res.payStatus === 0) {
        if (confirm == true) {
            uni.$u.toast('您的订单还未支付，请重新支付')
        }
        showPay.value = true
        // handlePayResult(PayStatusEnum.FAIL)
    } else {
        if (confirm == false) {
            uni.$u.toast('您的订单已经支付，请勿重新支付')
        }
        handlePayResult(PayStatusEnum.SUCCESS)
    }
    showCheckPay.value = false
}

const queryPayStatus = async () => {
    if (props.from === 'order' && payWay.value !== 2) {
        const res = await apiQueryOrder({ id: props.orderId })
        return res
    } else if (props.from === 'recharge') {
        await apiQueryRecharge({ id: props.orderId })
    }
}

const timeStamp = ref<number | null>(0)

watchEffect(() => {
    // 获取倒计时段
    const endTimestamp = payData.value.cancelTime
    const startTimestamp = new Date().getTime() / 1000
    timeStamp.value = (endTimestamp - startTimestamp) * 1000
    if (timeStamp.value === 0) orderClose()
})
// 超时关闭订单
const orderClose = async () => {
    await apiOrderClose({
        outTradeNo: props.orderId
    })
}

watch(
    () => props.show,
    async (value) => {
        if (value) {
            if (!props.orderId) {
                uni.$u.toast('订单信息错误，无法查询到订单信息')
                return
            }
            getPayData()
        }
    },
    {
        immediate: true
    }
)
</script>

<style lang="scss">
.payway-lists {
    .payway-item {
        border-bottom: 1px solid;
        @apply border-page;
    }
}

.Btn {
    border: 1px solid rgba(187, 187, 187, 1);
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
}
.count-down {
    color: #666666;
    padding: 10rpx 30rpx 10rpx 30rpx;
    background-color: #ffffff;
}
</style>
